<template>
  <div class="yuan">
    <div v-if="isGot" class="btn got">
        <div class="img">
            <img src="http://47.75.99.213/app/cdn/read-grey.png">
        </div>
        <div class="text">已领取</div>
    </div>
    <div v-else>
        <div v-if="time>=1">奖励正在收集中，{{ time }}S后即可领取</div>
        <div v-else class="btn get" @click="getdlb">
            <div class="img">
                <img src="http://47.75.99.213/app/cdn/read-blue.png">
            </div>
            <div class="text">点击领取</div>
        </div>
    </div>
  </div>
</template>
 
<script>
import { Toast } from 'mint-ui';
import { getDlb } from '@/api/api'
import { decryptByAES } from '@/utils/aes'
  export default {
    props: {
        getDlbState: {
            type: String
        },
        duration: {
            type: Number
        }
    },
    data() {
        return {
            time: 0,
            isClickGet:false,
            isGot:false
        }
    },
    mounted(){
        this.time = this.duration;
        if( this.getDlbState == '1' ){
            this.isGot = true
        }else{
            this.isGot = false
            this.startAnimate();
        }
    },
    methods:{
        startAnimate(){
            let interval = window.setInterval(() => {
                if ((this.time--) <= 0) {
                    window.clearInterval(interval);
                }
            }, 1000);
        },
        getdlb(){
            getDlb({
                "newId": this.$route.query.newId
            }).then(res => {
                if( res.code == 200 ){
                    this.isGot = true
                    this.isClickGet = true;
                    const data = JSON.parse(decryptByAES(res.data));
                    Toast({
                        message: 'dlb + ' + data.getDlb,
                        iconClass: 'icon iconfont icon-ic_check'
                    });
                }else{
                    Toast({
                        message: res.resMsg,
                        iconClass: 'icon iconfont icon-dingdanzhuangtaishibai'
                    });
                }
            })
        }
    }
  }
</script>
 
<style scoped lang="stylus">
.yuan{
    height:100px;
    line-height:100px;
    margin:20px auto 50px;
    color:#0055A4;
    text-align:center;
    .btn{
        margin: 0 auto;
        width:100px;
        height:100px;
        line-height: initial;
        border-radius:50%;
        margin-bottom: 50px;
        &.got{
            border:3px solid #EBEBEB;
            color:#999999;
        }
        &.get{
            border:3px solid #0055A4;
            color:#0055A4;
        }
        .img{
            width:32px;
            height:32px;
            margin:15px auto 0;
            display: inline-block;
        }
        .text{
            font-size:12px;
        }
    }
}
</style>
